<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card>
      <el-button
        style="float: left; margin-bottom:20px;width:100px"
        type="warning"
        @click="btnAdd"
      >新增模板</el-button>
      <el-table
        :data="depts"
        :row-style="{ height: '49px' }"
        stripe
        class="tableBox"
        style="width: 100%"
      >
        <el-table-column
          label="模板类型"
          prop="templateType"
          :formatter="formatGender"
          width="225"
        ></el-table-column>
        <el-table-column
          label="运送类型"
          prop="transportType"
          :formatter="formatGender2"
          width="225"
        ></el-table-column>
        <el-table-column
          label="关联城市"
          prop="associatedCityList"
          :formatter="formatGender3"
          width="225"
        ></el-table-column>
        <el-table-column
          label="首重"
          prop="firstWeight"
          width="256"
        ></el-table-column>
        <el-table-column
          label="续重"
          prop="continuousWeight"
          width="257"
        ></el-table-column>
        <el-table-column
          label="轻抛系数"
          prop="lightThrowingCoefficient"
          width="257"
        ></el-table-column>
        <el-table-column
          #default="{row}"
          label="操作"
          align="center"
        >
          <el-button
            type="text"
            size="49"
            @click="bianji(row)"
          >编辑</el-button><span class="xian"> | </span><el-button
            type="text"
            size="49"
            class="del"
            @click="btndel(row)"
          >删除</el-button>
        </el-table-column>
      </el-table>
    </el-card>
    <freight
      :id="id"
      :show.sync="show"
      :shows.sync="shows"
      :title="title"
      :dept.sync="dept"
      :template-type="templateType"
      :transport-type="transportType"
      :rules="rules"
      :associated-city-list.sync="associatedCityList"
      @freightManageList="freightManageList"
    ></freight>
  </div>
</template>

<script>
import { freightManageList, freightManageDelete } from '@/api/transit'
import { transport, template, CityList } from '@/eneum/eneum.js'
import freight from './components/freight-man.vue'
export default {
  components: {
    freight
  },
  data() {
    return {
      id: null,
      shows: true,
      title: '新增模板',
      show: false,
      depts: [],
      transport,
      template,
      CityList,
      associatedCityList: [
        {
          value: 2,
          label: '京津冀'
        },
        {
          value: 3,
          label: '江浙沪'
        },
        {
          value: 4,
          label: '川渝'
        },
        {
          value: 5,
          label: '黑吉辽'
        }],
      templateType: [{
        value: 1,
        label: '同城寄'
      },
      {
        value: 2,
        label: '省内寄'
      },
      {
        value: 3,
        label: '经济区互寄'
      },
      {
        value: 4,
        label: '跨省'
      }],
      transportType: [{
        value: 1,
        label: '普快'
      },
      {
        value: 2,
        label: '特快'
      }],
      dept: {
        associatedCityList: [],
        firstWeight: null,
        continuousWeight: null,
        lightThrowingCoefficient: null
      },
      rules: {
        templateType: [{ required: true, message: '模板类型不能为空', trigger: 'focus' }],
        transportType: [{ required: true, message: '运送类型不能为空', trigger: 'focus' }],
        firstWeight: [{ required: true, message: '首重价格不能为空', trigger: 'blur' }],
        continuousWeight: [{ required: true, message: '续重价格不能为空', trigger: 'blur' }],
        lightThrowingCoefficient: [{ required: true, message: '轻抛系数不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.freightManageList()
  },
  methods: {
    async freightManageList() {
      const { data } = await freightManageList()
      this.depts = data
    },
    formatGender(row) {
      return template[row.templateType]
    },
    formatGender2(row) {
      return transport[row.transportType]
    },
    formatGender3(row) {
      return row.associatedCityList.map(item => CityList[item])
    },
    btnAdd() {
      this.id = ''
      this.show = true
      this.title = '新增模板'
    },
    bianji(row) {
      console.log(row.id)
      this.id = row.id
      this.show = true
      this.title = '编辑模板'
      console.log(row.associatedCityList)
      if (row.templateType === 3) {
        this.shows = false
      }
      for (let i = 0; i < row.associatedCityList.length; i++) {
        row.associatedCityList[i] = parseInt(row.associatedCityList[i])
      }
      this.dept = row
    },
    async btndel(row) {
      await freightManageDelete(row)
      this.freightManageList()
      this.$message.success('删除成功')
    }
  }

}
</script>

<style lang="scss" rel="stylesheet/scss">
.el-card__body {
  width: 100%;
  height: 100%;
  padding: 28px 28px 58px 28px;
  .del span {
    color: #f56c6c;
  }
  .xian {
    color: #dcdfe6;
    margin: 0 6px;
  }
  .el-button--text {
    padding: 0;
  }
}
.waybill-list {
  padding: 20px;
  .el-dialog__wrapper {
    /deep/ .el-dialog__body {
      padding-left: 0px;
    }
  }
}
.tableBox {
  /deep/ .el-table__row {
    height: 49px !important;
  }
}
</style>
